<template>
     <div class="allworp">
         <div class="allhead">
             <router-view></router-view>
         </div>
         <div class="allfoot">
              <dl v-for="(item,index) in routerList" :key="index"  @click="pathFn(index)" :class="index==ind? 'active':''">
                  <dt></dt>
                  <dd>{{item.name}}</dd>
              </dl>
         </div>
     </div>
</template>

<script>
export default {
    data(){
        return {
            routerList:[
                {
                    path:'/all/home',
                    name:'首页',
                },
                 {
                    path:'/all/classfil',
                    name:'分类',
                },
                 {
                    path:'/all/shop',
                    name:'购物车',
                },
                 {
                    path:'/all/my',
                    name:'我的',
                },
            ],
            ind:0
        }
    },
    methods:{
        pathFn(ind){
            this.$router.push({
                path:this.routerList[ind].path
            })
            this.ind=ind
        }
    }
}
</script>

<style scoped>
  .allworp{
      width: 100%;
      height: 100%;
  }
  .allhead{
      width: 100%;
      height: calc(100% - 40px);
   }
  .allfoot{
      width: 100%;
      height: 40px;
      display: flex;
      line-height: 40px;
      justify-content: space-around;
  }
  .active{
      color: red;
  }
</style>